<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
  </head>
  <body>
    <canvas
      width="400px"
      height="200px"
      style="background-color: aqua"
    ></canvas>
  </body>
  <script>
    /*script用来包裹脚本代码*/
    var canvas = document.getElementsByTagName("canvas")[0]; //DOM操作，用来获取canves这个标签元素
    var ctx = canvas.getContext("2d"); //绘制2d图
    ctx.fillStyle = "#ff0000"; //设置填充色
    ctx.fillRect(50, 70, 200, 100); //绘制一个矩形 括号内两对数据 表示起点和终点
  </script>
</html>
